<template>
    <div class="baofu-pay">
        <el-row>
            <el-col class="zw-table-btns ali-l">
                <el-button type="primary" @click="addHandler">新建</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableList" :border="true" stripe>
            <el-table-column label="序号" width="70">
                <template v-slot="scope">
                    <span>{{ serialNum(form.pageSize, form.pageNum, scope.$index) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="店铺ID" prop="tenantId"></el-table-column>
            <el-table-column label="商户号" prop="merId"></el-table-column>
            <el-table-column label="微信二级商户号" prop="subMchId"></el-table-column>
            <el-table-column label="终端号" prop="terId"></el-table-column>
            <el-table-column label="证书" prop="cerPath">
                <template v-slot="{ row }">
                    <span>{{ row.cerPath ? '已上传' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="解密文件" prop="pfxPath">
                <template v-slot="{ row }">
                    <span>{{ row.pfxPath ? '已上传' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status">
                <template v-slot="{ row }">
                    <span>{{ transformStream(row.paymentStatus, 'IS_ENABLED') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="添加时间" prop="updatedAt" min-width="100"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="100">
                <template v-slot="scope">
                    <el-button class="table-btn" size="small" @click="addHandler(scope.row)"> 编辑 </el-button>
                    <el-button class="table-btn" size="small" @click="changeStatusHandler(scope.row)">
                        {{ scope.row.paymentStatus == 1 ? '停用' : '启用' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination zw-pagination">
            <Pagination
                :total="totalCount"
                :page-size="form.pageSize"
                :current-page="form.pageNum"
                @size-change="changeSizeHandler"
                @pageChange="changePageHandler" />
        </div>
        <EditPayment v-model="show" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue';
import constants from '@/commons/constants';
import Pagination from '@/components/Pagination.vue';
import request from '@/request/index';
import { ElMessage } from 'element-plus';
import EditPayment from './add.vue';

const bus = inject('bus');
const confirm = inject('confirm');

const totalCount = ref(0);
const form = reactive({
    pageNum: 1,
    pageSize: 10
});
let tableList = reactive([]);
let show = ref(false);

/**
 * 分页查询
 */
const queryAccountListHandler = async () => {
    const res = await request('queryPaymentPageServ', form);
    const { list } = res.data;
    tableList.length = 0;
    tableList.push(...list);
    totalCount.value = res.data.totalCount;
};

/**
 * 搜索
 */
const searchHandler = () => {
    form.pageNum = 1;
    queryAccountListHandler();
};

/**
 * 新增/编辑
 * @param {*} row
 */
const addHandler = row => {
    show.value = true;
    bus.emit('payment:edit', row);
};

/**
 * 修改状态
 */
const changeStatusHandler = async row => {
    const { paymentId, paymentStatus } = row;
    const params = {
        id: paymentId,
        status: paymentStatus === 1 ? 2 : 1
    };
    const text = constants['IS_ENABLED'][params.status];
    if (await confirm(`确定要${text}该配置吗？`)) {
        await request('disablePaymentInfo', params);
        ElMessage.success('操作成功！');
        row.paymentStatus = params.status;
    }
};

/**
 * 分页
 * @param {*} pageNum
 */
const changePageHandler = pageNum => {
    form.pageNum = pageNum;
    queryAccountListHandler();
};

/**
 * 每页记录数修改
 * @param {*} pageSize
 */
const changeSizeHandler = pageSize => {
    form.pageNum = 1;
    form.pageSize = pageSize;
    queryAccountListHandler();
};

onMounted(async () => {
    searchHandler();
    bus.on('payment:query', queryAccountListHandler);
});
</script>
<style lang="scss" scoped>
.ali-l {
    text-align: left;
}
.baofu-pay {
    :deep {
        /* .el-table {
            color: #33302d;

            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 14px;
            font-weight: 400;
            .el-button--small {
                color: #33302d;
                border: 1px solid #eaeaea;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 12px;
                font-weight: 400;
            }
            .el-button--small + .el-button--small {
                margin-left: 8px;
            }
        }
        .el-tabs__nav-wrap {
            margin-bottom: -15px;
            &::after {
                height: 0;
            }
        }
        .el-table .el-table__cell {
            padding: 20px 0;
        } */

        .el-table th.el-table__cell {
            color: #33302d;

            font-family: PingFangSC-Medium, PingFang SC;
            font-size: 14px;
            font-weight: 500;
        }
    }
}
.el-table {
    box-shadow: none;
    :deep(.el-table__empty-block) {
        border-bottom: 1px solid #eaeaea;
    }
}
</style>
